<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no" />
    <link rel="stylesheet" href="css/style.css" />
    <link rel="stylesheet" href="css/iconfont.css" />
    <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
    <link href="css/mobiscroll.javascript.min.css" rel="stylesheet" type="text/css" />
    <script src="js/mobiscroll.javascript.min.js" type="text/javascript"></script>
    <script src="js/mock.js"></script>
    <title>订单查询</title>
</head>

<body class="minipage">
    <div class="wrap">
        <div class="logocon">
            <div class="logoimg "><img src="./img/logo.png "></div>
            <div class="cont ">
                <p>O2O客戶服務平台（EC2）</p>
                <p>請關注粉絲專頁 <a href="javascript ">福皓整合科技</a></p>
            </div>
            <!-- <div class="sharecon ">
                <iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2FFull2house%2F&amp;width=50&amp;layout=box_count&amp;action=like&amp;size=large&amp;show_faces=false&amp;share=false&amp;height=65&amp;appId=382298112140973 "
                    width="50 " height="50 " style="border:none;overflow:hidden " scrolling="no " frameborder="0 " allowtransparency="true "></iframe>
            </div> -->
        </div>
        <section class="order">
            <div class="search-con">
                <div class="carousel-search clearfix">
                    <div class="btn-group condition fl">
                        <a class="btn dropdown-toggle btn-select" href="javascript:;">
                            <font>日期</font> <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#" data-value="1">日期</a></li>
                            <li><a href="#" data-value="2">收貨人</a></li>
                            <li><a href="#" data-value="3">訂單狀態</a></li>
                        </ul>
                    </div>
                    <div class="search fl">
                        <input class="searchTxt" id="range" placeholder="日期" />
                    </div>
                    <div class="btnSearch-con fr">
                        <a id="btnSearch" class="btn btnSearch"><i class="icon iconfont icon-sousuo"></i></a>
                        <!-- <button type="button" id="btnSearch" class="btn btnSearch"><i class="fa fa-search" aria-hidden="true"></i></button> -->
                    </div>
                </div>
            </div>
            <dl>
                <dd class="ec_goods clearfix">
                    <div class="ec_div1 txt_align_r">
                        <p class="price">NT$ 67.99</p>
                        <p class="status">已發貨</p>
                    </div>
                    <div class="ec_div2"><img src="img/ec_pic1.jpg" alt=""></div>
                    <div class="ec_div3">
                        <p class="order-number">訂單號：39203984923837</p>
                        <p class="receiver">收貨人：小明</p>
                        <p class="date">2018-01-09</p>
                    </div>
                    <div class="operate"><a href="javascript:;" class="btn btn-gray-o">檢視訂單</a><a href="javascript:;" class="btn btn-green-o">重新下單</a></div>
                </dd>
                <dd class="ec_goods clearfix">
                    <div class="ec_div1 txt_align_r">
                        <p class="price">NT$ 8.80</p>
                        <p class="status">已發貨</p>
                    </div>
                    <div class="ec_div2"><img src="img/ec_pic1.jpg" alt=""></div>
                    <div class="ec_div3">
                        <p class="order-number">訂單號：39203984923837</p>
                        <p class="receiver">收貨人：小明</p>
                        <p class="date">2018-01-09</p>
                    </div>
                    <div class="operate"><a href="javascript:;" class="btn btn-gray-o">檢視訂單</a><a href="javascript:;" class="btn btn-green-o">重新下單</a></div>
                </dd>
                <dd class="ec_goods clearfix">
                    <div class="ec_div1 txt_align_r">
                        <p class="price">NT$ 39.99</p>
                        <p class="status">待發貨</p>
                    </div>
                    <div class="ec_div2"><img src="img/ec_pic1.jpg" alt=""></div>
                    <div class="ec_div3">
                        <p class="order-number">訂單號：39203984923837</p>
                        <p class="receiver">收貨人：小明</p>
                        <p class="date">2018-01-09</p>
                    </div>
                    <div class="operate"><a href="javascript:;" class="btn btn-gray-o">檢視訂單</a><a href="javascript:;" class="btn btn-green-o">重新下單</a></div>
                </dd>
                <dd class="ec_goods clearfix">
                    <div class="ec_div1 txt_align_r">
                        <p class="price">NT$ 9.99</p>
                        <p class="status">已發貨</p>
                    </div>
                    <div class="ec_div2"><img src="img/ec_pic1.jpg" alt=""></div>
                    <div class="ec_div3">
                        <p class="order-number">訂單號：39203984923837</p>
                        <p class="receiver">收貨人：小明</p>
                        <p class="date">2018-01-09</p>
                    </div>
                    <div class="operate"><a href="javascript:;" class="btn btn-gray-o">檢視訂單</a><a href="javascript:;" class="btn btn-green-o">重新下單</a></div>
                </dd>
                <dd class="ec_goods clearfix">
                    <div class="ec_div1 txt_align_r">
                        <p class="price">NT$ 909.99</p>
                        <p class="status">待發貨</p>
                    </div>
                    <div class="ec_div2"><img src="img/ec_pic1.jpg" alt=""></div>
                    <div class="ec_div3">
                        <p class="order-number">訂單號：39203984923837</p>
                        <p class="receiver">收貨人：小明</p>
                        <p class="date">2018-01-09</p>
                    </div>
                    <div class="operate"><a href="javascript:;" class="btn btn-gray-o">檢視訂單</a><a href="javascript:;" class="btn btn-green-o">重新下單</a></div>
                </dd>
            </dl>
            <p class="load_more" data-page="0"></p>
        </section>
    </div>
    <script type="text/javascript">
    $(function() {
        // 是否启用调试模式模拟加载更多
        var isDebug = 1;
        // 如果启用了调试模式，则MOCK数据 
        if (isDebug) {
            Mock.mock('loadList', {
                "code": 0,
                "msg": "成功",
                "data|10": [{
                    "imgsrc": "@image('110x110','#ea4335','IMAGE')",
                    "price|1": ['909.99', '9.99'],
                    "status|1": ['待發貨', '已發貨'],
                    "orderNo|1": ['392309543', '328905809'],
                    "name|1": ['小明', '小妹'],
                    "date|1": ['2018-09-07', '2018-02-09']
                }]

            });
        }
        var seachParams = {
            val: '1',
            date: ''
        }
        mobiscroll.date('#range', {
            theme: 'ios',
            lang: 'zh'
        });
        $(document).on('click', '.btn-select', function(e) {
            var par = $(this).closest('.btn-group');
            par.find('.dropdown-menu').toggle();
        });
        $(document).on('click', '.dropdown-menu>li>a', function(e) {
            $('.dropdown-menu').hide();
            var txt = $(this).text();
            var val = $(this).attr('data-value');
            if (val == seachParams.val) {
                return false;
            }
            seachParams.val = $(this).attr('data-value');
            switch (seachParams.val) {
                case '1':
                    $('.search').html('<input class="searchTxt" id="range" placeholder="日期">');
                    mobiscroll.date('#range', {
                        theme: 'ios',
                        lang: 'zh'
                    });
                    break;
                case '2':
                    $('.search').html('<input class="searchTxt" placeholder="收貨人">');
                    break;
                case '3':
                    $('.search').html('<input class="searchTxt" placeholder="訂單狀態">');
                    break;
            }
            $('.btn-select').find('font').text(txt);
        });
        $(document).on('click', '#btnSearch', function(e) {
            seachParams.date = $('.searchTxt').val();
            console.log(seachParams);
        });
        $(window).scroll(function() {
            var scrollTop = $(this).scrollTop();
            var scrollHeight = $(document).height();
            var windowHeight = $(window).height();
            if (scrollTop + windowHeight == scrollHeight) {

                $('.load_more').text('加載中...');
                //记录当前页数
                var page= parseInt($('.load_more').attr('data-page'))+1;
                var params={
                    "pagesize":page
                }
                loadList(params);

            }
        });

        function loadList(params) {
            $.ajax({
                type: 'get',
                url: 'loadList',
                //data:params,
                success: function(res) {
                    var d=res.data;
                    if (d.length > 0) {
                        var html = '';
                        for (var i = 0; i < d.length; i++) {
                            html += '<dd class="ec_goods clearfix">\
                    <div class="ec_div1 txt_align_r">\
                        <p class="price">NT$ '+d[i].price+'</p>\
                        <p class="status">'+d[i].status+'</p>\
                    </div>\
                    <div class="ec_div2"><img src="'+d[i].imgsrc+'" alt=""></div>\
                    <div class="ec_div3">\
                        <p class="order-number">訂單號：'+d[i].orderNo+'</p>\
                        <p class="receiver">收貨人：'+d[i].name+'</p>\
                        <p class="date">'+d[i].date+'</p>\
                    </div>\
                    <div class="operate">\
                    <a href="javascript:;" class="btn btn-gray-o">檢視訂單</a>\
                    <a href="javascript:;" class="btn btn-green-o">重新下單</a></div>\
                </dd>';

                        }
                        $('dl').append(html);
                        $('.load_more').attr('data-page',params.pagesize);
                    } else {
                        $('.load_more').text('沒有更多數據了');
                    }
                },
                error: function(res) {
                    alert(res.msg);
                },
                dataType: 'json'
            });
        }
    })
    </script>
</body>

</html>